<template>
  <div>
<van-nav-bar class="page-nav"
  title="个人信息"
  left-arrow
  @click-left="onClickLeft"
/>
<van-cell-group arrow-right>
  <van-cell title="头像" value="内容" is-link   @click="$refs.fileinput.click()">
    <van-image
  width="30"
  height="30"
  fit="cover"
  round
  :src="list.photo"
/>
<input type="file" class="hide" ref="fileinput" @change="inputChange">
</van-cell>
<van-popup v-if="showimage" v-model="showimage" position="bottom" :style="{ height: '100%' }" >
       <updateImage @close="showimage=false" :img="img" @updataphoto="list.photo=$event"></updateImage>
      </van-popup>
  <van-cell title="昵称" :value="list.name" is-link @click="show = true"/>
   <van-popup v-model="show" position="top" :style="{ height: '20%' }" >
       <updateName v-if="show" @close="show=false" v-model="list.name"></updateName>
      </van-popup>
  <van-cell title="性别" :value="list.gender ? '女':'男'" is-link  @click="showgender = true"/>
   <van-popup v-model="showgender" position="bottom" :style="{ height: '30%' }" >
       <updateGender v-if="showgender" @close="showgender=false"  v-model="list.gender"></updateGender>
      </van-popup>
  <van-cell title="生日" :value="list.birthday" is-link @click="showBirthday = true"/>
   <van-popup v-model="showBirthday" position="bottom" :style="{ height: '30%' }" >
       <updataTime v-if="showBirthday" @close="showBirthday=false"  v-model="list.birthday"></updataTime>
      </van-popup>
</van-cell-group>
  </div>
</template>

<script>
import { getUser } from '@/api/user.js'
import updateName from './components/update-name.vue'
import updateGender from './components/update-gender.vue'
import updataTime from './components/update-time.vue'
import updateImage from './components/update-images.vue'
export default {
  data () {
    return {
      list: [],
      show: false,
      showgender: false,
      showBirthday: false,
      showimage: false,
      img: null
    }
  },
  components: {
    updateName,
    updateGender,
    updataTime,
    updateImage
  },
  created () {
    this.loadProfile()
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async loadProfile () {
      try {
        const { data } = await getUser()
        console.log(data)
        this.list = data.data
      } catch (err) {
        console.log('获取失败', err)
      }
    },
    inputChange () {
      // 获取头像
      const file = this.$refs.fileinput.files[0]
      this.img = window.URL.createObjectURL(file)
      this.showimage = true
      this.$refs.fileinput.value = ''
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar__title {
  color: #fff;
}
.hide {
 display: none;
}
</style>
